<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/layer-css.css"/>
    <link rel="stylesheet" href="/admin/css/other/console2.css"/>
    <style>
        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .pear-container {
            margin: 15px;
            width: calc(100vw - 30px);
        }

        .pear-card {
            width: 150px;
            height: 68px;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 0px;
        }

        .pear-card:not(:first-child) {
            margin-left: 30px;
        }

        .pear-card-icon {
            width: 52px;
            height: 52px;
            margin-left: 14px;
            margin-right: 10px;
        }

        .pear-card-icon-lockStop {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }

        .realTimeControlInformation {
            width: 100%;
            height: 490px;
            background: #F8F8F9;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D8E1E8;
            font-size: 16px;
            color: #707070;
        }

        .realTimeControlInformation .info {
            margin-top: 20px;
        }

        .denseShelfImage {
            width: 100px;
            height: 490px;
        }

        .frameImage {
            position: relative;
            display: inline-block;
            margin-left: 2vh;
        }

        .denseRackNumber {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            font-weight: bold;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }

        .fixedInformationIdentification {
            position: absolute;
            top: 16.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
            border-radius: 5px;
            text-align: center;
        }


        .test1 img {
            transition: transform 0.2s, opacity 0.2s; /* 设置过渡效果 */
        }

        .test1 img:active {
            transform: scale(0.9); /* 点击时图片缩小 */
            opacity: 0.7; /* 点击时改变图片的透明度 */
        }

        .infoDiv{
            width: 80px;
        }
    </style>
    <style>
        /* 之前的CSS代码保持不变 */
        @keyframes example {
            from {
                transform: scale(0.8);
            }
            to {
                transform: scale(1);
            }
        }

        .animate {
            animation: example 0.5s infinite alternate;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row manualControl layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        手动操作
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row layui-col-space5" style="margin-top: 24px;margin-bottom: 12px">
                    <form class="layui-form" action="" onsubmit="return false">
                        <div class="layui-form-item">
<!--                            <div class="layui-form-item layui-inline">-->
<!--                                <label class="layui-form-label">选择库房</label>-->
<!--                                <div class="layui-input-inline">-->
<!--                                    <input type="number" id="archiveArea" name="archiveArea" lay-verify="required"-->
<!--                                           lay-reqtext="请选择库房位置"-->
<!--                                           style="display:none;width: 0px" autocomplete="off" class="layui-input">-->
<!--                                    <ul id="areaTree" class="dtree" data-id="0"></ul>-->
<!--                                </div>-->
<!--                            </div>-->
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">选择载体</label>
                                <div class="layui-input-inline">
                                    <select name="hostId" lay-filter="carrierSelect" id="carrierSelect"
                                            lay-verify="required"
                                            lay-reqtext="请选择载体设备" lay-search>
                                        <option value="">请选择载体设备</option>
                                        <option th:each="host : ${hostList}" th:value="${host.id}" th:text="${'载体名称: '+host.cabinetName+' 载体区号: '+host.cabinetNumber}">></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">列</label>
                                <div class="layui-input-inline">
                                    <select name="fixedColumn" lay-search id="columnNumberSelect"
                                            lay-filter="columnNumberSelect">
                                        <option value="">请选择列</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">密集架区</label>
                                <div class="layui-input-inline">
                                    <select name="fixedColumn" lay-search lay-filter="denseRackRegion">
                                        <option value="">请选择密集架区</option>
                                        <option value="0">左区</option>
                                        <option value="1">右区</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-row layui-col-space5" style="margin-top: 24px;margin-bottom: 12px">
                    <div class="layui-col-md12" style="display: flex;">
                        <div class="pear-card" id="openColumn">
                            <img src="/img/HandMovement/打开列.png" alt="" class="pear-card-icon">
                            <span class="pear-card-title">打开列</span>
                        </div>
<!--                        <div class="pear-card" id="openTheTaskGuide">-->
<!--                            <img src="/img/HandMovement/打开任务指引.png" alt="" class="pear-card-icon">-->
<!--                            <span class="pear-card-title">打开任务指引</span>-->
<!--                        </div>-->
                        <div class="pear-card" id="airChange">
                            <img src="/img/HandMovement/通风.png" alt="" class="pear-card-icon">
                            <span class="pear-card-title">通风</span>
                        </div>
                        <div class="pear-card" id="lock">
                            <img src="/img/HandMovement/锁定.png" alt="" class="pear-card-icon">
                            <span class="pear-card-title">锁定</span>
                        </div>
                        <div class="pear-card" id="closedFrame">
                            <img src="/img/HandMovement/闭架.png" alt="" class="pear-card-icon">
                            <span class="pear-card-title">闭架</span>
                        </div>
                        <div class="pear-card" style="justify-content: center;" id="unlock">
                            <img src="/img/HandMovement/解锁.png" alt="" class="pear-card-icon-lockStop">
                            <span class="pear-card-title">解锁</span>
                        </div>
                        <div class="pear-card" style="justify-content: center;" id="mtStop">
                            <img src="/img/HandMovement/停止.png" alt="" class="pear-card-icon-lockStop">
                            <span class="pear-card-title">停止</span>
                        </div>
                        <div class="pear-card" style="justify-content: center;" id="loginOut">
                            <img src="/img/HandMovement/停止.png" alt="" class="pear-card-icon-lockStop">
                            <span class="pear-card-title">退出</span>
                        </div>
                        <div class="pear-card" id="singleRowInventory" th:if="${sysType == '3'}">
                            <img src="/img/HandMovement/单列盘库.png" alt="" class="pear-card-icon">
                            <span class="pear-card-title">单列盘库</span>
                        </div>
                        <div class="pear-card" id="theEntireInventory" th:if="${sysType == '3'}">
                            <img src="/img/HandMovement/全部盘库.png" alt="" class="pear-card-icon">
                            <span class="pear-card-title">整个盘库</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row manualControl layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        架体信息
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row" style="margin-left: 12px;margin-top: 30px;display: flex;">
                    <div class="layui-col-xs2 layui-col-md2">
                        <div class="realTimeControlInformation centered" style="flex-direction: column;">
                            <div class="info centered">
                                <div class="infoDiv">ip地址:</div>
                                <div id="ip">00</div>
                            </div>
<!--                            <div class="info centered">-->
<!--                                <div class="infoDiv">库房名称:</div>-->
<!--                                <div id="areaName">00</div>-->
<!--                            </div>-->
                            <div class="info centered">
                                <div class="infoDiv">载体名称:</div>
                                <div id="cabinetName">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">载体区号:</div>
                                <div id="cabinetNumber">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">载体列数:</div>
                                <div id="columnNumber">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">载体节数:</div>
                                <div id="cabinetJoint">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">载体层数:</div>
                                <div id="cabinetLayer">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">档案总数:</div>
                                <div id="archiveTotal" style="color: brown;">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">在库总数:</div>
                                <div id="restoreCount" style="color: brown;">00</div>
                            </div>
                            <div class="info centered">
                                <div class="infoDiv">取出总数:</div>
                                <div id="borrowCount" style="color: brown;">00</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs10 layui-col-md10">
                        <div style="margin-left: 50px;display: flex;max-width: 100%;overflow: auto;" id="denseShelf">
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">1</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">2</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">3</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架固定列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">固定列</span>
                                <span class="denseRackNumber" style="display: none;">4</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">5</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">6</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">7</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">8</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">9</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">10</span>
                            </div>
                            <div class="frameImage">
                                <img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">
                                <span class="fixedInformationIdentification">移动列</span>
                                <span class="denseRackNumber" style="display: none;">11</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'loading', 'dtree'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let hostId = "";
        let column = "";
        let denseRackRegion = "";

        // // dtree插件下拉框点击空白处隐藏
        // $(document).bind("click", function (e) {
        //     var e = e || window.event;    //事件对象，兼容IE
        //     var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
        //     if ($(target).prop("class").indexOf("layui-card") == -1) {
        //         $(".dtree-select-show").removeClass("dtree-select-show");
        //     }
        // })
        // // 初始化区域树
        // dtree.render({
        //     elem: "#areaTree",
        //     initLevel: "1",//默认展开层级为1
        //     width: "100%",
        //     method: 'get',
        //     dataStyle: "layuiStyle",  //使用layui风格的数据格式
        //     // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
        //     url: "/archives/area/buildAreaTree/table",
        //     dataFormat: "list",  //配置data的风格为list
        //     select: true, //指定下拉树模式
        //     selectTips: "请选择库房位置",
        //     selectCardHeight: "230"
        // });
        // dtree.on("node('areaTree')", function (obj) {
        //     hostId = "";
        //     column = "";
        //     var param = dtree.getNowParam("areaTree");
        //     areaId = param.nodeId;
        //     $.ajax({
        //         url: "/host/get/list?areaId=" + areaId,
        //         type: "get",
        //         dataType: "json",
        //         success: function (result) {
        //             carrierSelect = result.data;
        //             let carrierSelectHtml = "<select name='hostId' lay-verify='required' lay-reqtext='请选择载体设备' lay-search>";
        //             carrierSelectHtml += "<option value=''>请选择载体设备</option>";
        //             for (let i = 0; i < carrierSelect.length; i++) {
        //                 let item = carrierSelect[i];
        //                 carrierSelectHtml += "<option value='" + item.id + "'>载体名称:" + item.cabinetName + " 区号:" + item.cabinetNumber + "</option>";
        //             }
        //             carrierSelectHtml += "</select>";
        //             $("#carrierSelect").html(carrierSelectHtml);
        //             form.render("select");
        //         }
        //     });
        // });

        // 选择载体
        form.on('select(carrierSelect)', function (data) {
            var value = data.value;
            if (value === "") {
                return false;
            }
            hostId = value;
            column = "";
            $.ajax({
                url: '/host/get/info?hostId=' + hostId,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    let html = "<option value=''>请选择列</option>";
                    for (let column = 1; column <= result.data.columnNumber; column++) {
                        if (column !== result.data.fixedColumn) {
                            html += '<option value="' + column + '">' + column + '</option>';
                        }
                    }
                    $("#columnNumberSelect").html(html);
                    form.render('select'); //刷新select选择框渲染

                    $(".frameImage").remove();

                    let cabinetBody = '';
                    for (let column = 1; column <= result.data.columnNumber; column++) {
                        cabinetBody += '<div class="frameImage" id="cabinetBody_' + column + '">';
                        if (column !== result.data.fixedColumn) {
                            cabinetBody += '<img src="/img/HandMovement/密集架移动列.png" alt="" class="denseShelfImage">';
                            cabinetBody += '<span class="fixedInformationIdentification">移动列</span>';
                        } else {
                            cabinetBody += '<img src="/img/HandMovement/密集架固定列.png" alt="" class="denseShelfImage">';
                            cabinetBody += '<span class="fixedInformationIdentification">固定列</span>';
                        }
                        cabinetBody += '<span class="denseRackNumber">' + column + '</span></div>';
                    }
                    $("#denseShelf").append(cabinetBody);

                    $("#ip").text("00");
                    // $("#areaName").text("00");
                    $("#cabinetName").text("00");
                    $("#cabinetNumber").text("00");
                    $("#columnNumber").text("00");
                    $("#cabinetJoint").text("00");
                    $("#cabinetLayer").text("00");
                    $("#archiveTotal").text("00");
                    $("#borrowCount").text("00");
                }
            })

        });
        // 选择列
        form.on('select(columnNumberSelect)', function (data) {
            var value = data.value;
            if (value === "") {
                return false;
            }
            column = value;
        });

        function reqeustUtil(url, data) {
            let loading = layer.load();
            $.ajax({
                url: url,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: "POST",
                data: JSON.stringify(data),
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 3000});
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
        }

        // 选择密集架区
        form.on('select(denseRackRegion)', function (data) {
            var value = data.value;
            if (value === "") {
                return false;
            }
            denseRackRegion = value;
            console.log(denseRackRegion)
        });

        // 打开列 处理
        $("#openColumn").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            if (denseRackRegion === "") {
                layer.msg("请选择密集架区", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/openColumn", {"hostId": hostId, "column": column, "denseRackRegion": denseRackRegion});


            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });

        // 判断元素是否在可视区域内
        function isElementVisibleHorizontally(element) {
            const rect = element.getBoundingClientRect(); // 获取元素的位置和尺寸
            const container = element.parentNode; // 假设滚动容器是元素的直接父元素
            const containerRect = container.getBoundingClientRect(); // 获取滚动容器的位置和尺寸

            // 计算元素在容器内的水平位置
            const elementLeft = rect.left - containerRect.left;
            const elementRight = rect.right - containerRect.left;

            // 获取容器的水平滚动位置
            const scrollLeft = container.scrollLeft;
            const scrollRight = scrollLeft + container.clientWidth; // 容器可视区域的右边界

            // 判断元素是否在水平滚动区域内可见
            return (elementLeft >= scrollLeft && elementRight <= scrollRight) ||
                (elementLeft <= scrollLeft && elementRight >= scrollLeft) ||
                (elementLeft <= scrollRight && elementRight >= scrollRight);
        }

        // 滚动到指定元素
        function scrollToElement(idName) {
            const element = document.getElementById(idName);
            element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
        }

        // 开始动画
        function startAnimate(idName) {
            // 获取所有的图片元素
            const images = document.querySelectorAll('#' + idName);
            // 为每个图片元素添加动画效果
            images.forEach((img) => {
                img.classList.add('animate');
            });
            sleep(5000);
        }

        function sleep(ms) {
            setTimeout(function () {
                console.log("动画结束了");
                $(".frameImage").removeClass("animate");
            }, ms);
        }

        // 单个盘库
        $("#singleRowInventory").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/singleRowInventory", {"hostId": hostId, "column": column});
        });

        // 闭架 处理
        $("#closedFrame").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/closedFrame", {"hostId": hostId});

            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });

        // 解锁 处理
        $("#unlock").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/unlock", {"hostId": hostId});

            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });

        // 锁定 处理
        $("#lock").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/lock", {"hostId": hostId});

            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });


        // 通风 处理
        $("#airChange").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/airChange", {"hostId": hostId});

            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });


        // 停止 处理
        $("#mtStop").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/mtStop", {"hostId": hostId});

            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });


        // 停止 处理
        $("#loginOut").click(function () {
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil("/hand/movement/loginOut", {"hostId": hostId});

            startAnimate('cabinetBody_' + column);
            let status = isElementVisibleHorizontally(document.getElementById('cabinetBody_' + column));
            if (!status) {
                scrollToElement('cabinetBody_' + column);
            }
        });


        // 点击列显示信息
        $(document).on('click', '.frameImage', function(){
            if (hostId === "") {
                layer.msg("请选择载体", {icon: 2, time: 3000});
                return false;
            }
            let id = $(this).attr("id");

            let column = id.split("_")[1];
            $.ajax({
                url: '/hand/movement/column/info',
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: "POST",
                data: JSON.stringify({"hostId": hostId,"column": column}),
                success: function (result) {
                    let map = result.data;
                    $("#ip").text(map.ip);
                    // $("#areaName").text(map.areaName);
                    $("#cabinetName").text(map.cabinetName);
                    $("#cabinetNumber").text(map.cabinetNumber);
                    $("#cabinetJoint").text(map.cabinetJoint);
                    $("#cabinetLayer").text(map.cabinetLayer);
                    $("#archiveTotal").text(map.archiveTotal);
                    $("#restoreCount").text(map.restoreCount);
                    $("#borrowCount").text(map.borrowCount);

                    console.log(result);
                }
            })
            startAnimate(id);
            let status = isElementVisibleHorizontally(document.getElementById(id));
            if (!status) {
                scrollToElement(id);
            }
            console.log($(this).attr("id"))

        });
    });
</script>
</body>
</html>